<template>
  <div id="app">
    <TodoHeader />
    <TodoInput @Inputvalue='getInputvalue' />
    <TodoLiebiao :todos='list' />
  </div>
</template>

<script>
import TodoHeader from '@/components/TodolistHeader'
import TodoInput from '@/components/TodolistInput'
import TodoLiebiao from '@/components/Todolistliebiao'
export default {
  name: 'App',
  data() {
    return {
      list:new Array(4).fill(null).map((u,i) => ({
          id: Math.random(),
          title: '陈症结' + i,
          isok: false
  }))
    }
  },
  components: {
    TodoHeader,
    TodoInput,
    TodoLiebiao
  },
  methods: {
    getInputvalue(value) {
        this.list.unshift({
          id: Math.random(),
          title: value,
          isok: false
        })
    },
    changeItem(id) {
      this.list = this.list.map(item => {
        if(item.id === id){
          item.isok = !item.isok
        }
        return item
      })
    },
    DeletItem(id) {
      this.list = this.list.filter(item => {
        if(item.id!==id){
          return item
        }
      })
    }
  },
  created() {
    this.$bus.$on('toggle',this.changeItem)
    this.$bus.$on('Delete',this.DeletItem)
    fetch('https://jsonplaceholder.typicode.com/todos')
        .then(resp => {
          return resp.json()
        })
        .then(data => {
          this.list = data
        })
  }
}
</script>

<style>

</style>
